<script lang="ts">
    import { Toaster } from "@skeletonlabs/skeleton-svelte";
import { registerBorrower, registerLibrarian } from "./api/api";
    import toaster from "./toaster";

let name = $state("");
let password = $state("");
let email = $state("");
let role = $state("");

async function register() {
  if (role === "borrower") {
    const reg = await registerBorrower({
      name,
      password,
      email,
    });
    toaster.create({
      title: reg.data.success ? "Registration successful" : reg.data.message,
      type: reg.data.success ? "success" : "error",
    })
  } else {
    const reg = await registerLibrarian({
      name,
      password,
      email,
    });
    toaster.create({
      title: reg.data.success ? "Registration successful" : reg.data.message,
      type: reg.data.success ? "success" : "error",
    })
  }
}
</script>

<Toaster {toaster}/>
<form class="max-w-md mx-auto mt-10 p-6 bg-white rounded-xl shadow-md space-y-6" on:submit|preventDefault={register}>
  <div>
    <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
    <input
      type="text"
      id="name"
      name="name"
      bind:value={name}
      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
    />
  </div>

  <div>
    <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
    <input
      type="password"
      id="password"
      name="password"
      bind:value={password}
      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
    />
  </div>

  <div>
    <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
    <input
      type="email"
      id="email"
      name="email"
      bind:value={email}
      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
    />
  </div>

  <div>
    <label for="role" class="block text-sm font-medium text-gray-700">Role</label>
    <select
      id="role"
      name="role"
      bind:value={role}
      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
    >
      <option value="borrower">Borrower</option>
      <option value="librarian">Librarian</option>
    </select>
  </div>

  <button
    type="submit"
    class="w-full py-2 px-4 bg-indigo-600 text-white font-semibold rounded-md shadow hover:bg-indigo-700 transition duration-200"
  >
    Register
  </button>
</form>